<template>
    <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
   <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>

    <div>
        <h1>Vue Study</h1>
        <h1>{{testtitle}}</h1>
    </div>

    <div>
        <button @click="changeMessage">点击修改产生日志</button>
        <p>{{ message }}</p>
    </div>

    <p>{{ testtitle.split('') }}</p>
    <p>{{ testtitle.split('').reverse() }}</p>
    <p>{{ testtitle.split('').reverse().join('') }}</p>

    <input v-model="testtitle" placeholder="请输入标题" />
    <li v-for="(item,index) in items_arr">
        <span>{{ index+1 }}</span>
        <span>--{{ item }}</span>
    </li>

    <p v-if="testtitle.length > 5">标题长度大于5</p>
    <p v-else>标题长度小于5</p>

    <p v-show="testtitle.length > 5">标题长度大于5</p>
    <p v-if="radomnumber > 5 && radomnumber < 10">随机数在5到10之间</p>
    <p v-else-if="radomnumber>= 10">随机数大于或等于10</p>
    <p v-else>随机数小于或等于5</p>
    <h1>当前随机数：{{ radomnumber }}</h1>

    <div>
    <input placeholder="请输入网址" v-model='target_host'/>
    <a :href="target_herf" target="_blank">{{search}}</a>
    <h3>目前网址：{{ target_herf }}</h3>
    <h3>目前主域名：{{ target_host }}</h3>
    </div>

    <div v-for="(value, key) in myobject" :key="key">
        <p>{{ key }}: {{ value }}</p>
    </div>

    <div>
    <input v-model="myobject.name" placeholder="请输入姓名" />
    <button @click="myobject_getname">获取姓名</button>
    </div>

    <select v-model="myobject.edu">
        <option value="本科">本科</option>
        <option value="专科">专科</option>
        <option value="高中">高中</option>
    </select>

    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>

    <select v-model="myobject.hobby" multiple>
        <option value="吃饭">吃饭</option>
        <option value="睡觉">睡觉</option>
        <option value="打豆豆">打豆豆</option>
    </select>

    <p v-for ="n in 5">
        这是第{{ n }}次：
        {{ e_message }}   
    </p>
    <h3>接下来是内联事件处理器</h3>
    <button @click="console.log('内联事件处理器')">点击我日志文件查看</button>
    <button @click="counter_add">点击我积功德</button>
    <p>功德:{{ counter }}</p>

    <button @click="awesome = !awesome">Toggle</button>

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <div>
        <button @click="question_Feedback">我有问题</button>
        <select v-model="question">
            <option value="问题1">问题1</option>
            <option value="问题2">问题2</option>
        </select>
        <p>问题反馈：{{ question }}</p>
    </div>
</template>

<script>
export default {
    name: 'Vuestudy',
    data() {
        return {
            message: '点击',
            testtitle: '测试标题',
            items_arr: ['a', 'b', 'c', 'd', 'e'],
            radomnumber: Math.floor(Math.random() * 20),
            target_host: 'baidu',
            search: '搜索',

            myobject: {
                    name: '小明',
                    age: 18,
                    color: 'red',
                    hobby: ['吃饭', '睡觉', '打豆豆'],
                    edu:'本科',
                    },
                parentMessage: '父组件传递过来的数据',
            items: [
                    { message: 'Hello Vue 1' },
                    { message: 'Hello Vue 2' },
                    { message: 'Hello Vue 3' }, 
                    ],
            e_message: '这是v-for的适用范围值测试，n取值为5', 
            counter: 0, 
            awesome: true,
                }
            
        },   
    methods: {
        changeMessage() {
            this.message = '你点击了按钮，打开控制台查看'
            console.log(this.message)
            },
        myobject_getname() {
            console.log(this.myobject.name)
            }, 
        counter_add() {
            this.counter += 1
            console.log('功德+1')
            },
            question_Feedback
            () {
                console.log('问题反馈')
                if (this.question === '问题1') {
                    console.log('问题1反馈')
                } else if (this.question === '问题2') {
                    console.log('问题2反馈')
                }
            },
    },
    computed: {
            target_herf() {
                return 'https://www.' + this.target_host + '.com'
                }
            },
    beforeCreate() {
        console.log('组件即将创建')
        },
    created() {
        console.log('组件已创建')
        },
    beforeMount() {
        console.log('组件即将挂载')
        },
    beforeupdate() {
        console.log('组件即将更新')
        },
    updated() {
        console.log('组件已更新')
        },
    mounted() {
        console.log('组件已挂载')
        this.$nextTick(() => {
            console.log('DOM已更新')
            })
        },
}       
</script>
